<template>
	<view class="index">
		<view class="search-area">
			<button type="default">三</button>
			<view class="search-icon" @click="gotoSearchPage">搜索商品</view>
		</view>
		<view class="swiper-area">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item v-for="(item, index) in swiperListData" :key="index">
					<image :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="type-show">
			<view><image src="../../static/icons/supermarket.png"></image>超市</view>
			<view><image src="../../static/icons/3c.png"></image>数码电器</view>
			<view><image src="../../static/icons/bh.png"></image>新百货</view>
			<view><image src="../../static/icons/sx.png"></image>生鲜</view>
			<view><image src="../../static/icons/dj.png"></image>到家</view>
			<view><image src="../../static/icons/cj.png"></image>充值缴费</view>
			<view><image src="../../static/icons/hd.png"></image>附近好店</view>
			<view><image src="../../static/icons/lq.png"></image>领券</view>
			<view><image src="../../static/icons/hy.png"></image>会员</view>
			<view><image src="../../static/icons/gj.png"></image>国际</view>
		</view>
		<view class="goods-area">
			<block v-for="item in goodsIntroList" :key="item.goodsid">
				<index-good style="width: 46%;margin: 15rpx;border-radius: 5px;padding: 10px 0;background-color: white;" :item="item" @click.native="gotoGoodsDetail(item.goodsid, item.merchantsid)"></index-good>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 存储轮播图路径数据列表
				swiperListData: [],
				// 存储商品大致信息列表
				goodsIntroList: [],
				// 请求商品的当前页数  默认为1
				page: 1,
				// 请求商品每页的条数 默认为10
				num: 10,
				isReachingBottomRequest: false,
				// 商品是否请求完毕的标识变量
				isFinish: false
			}
		},
		onLoad() {
			this.getSwiperList(),
			this.getGoodsIntro()
		},
		onReachBottom() {
			!this.isFinish && this.page++
			this.getGoodsIntro()
		},
		methods: {
			// 获取轮播图数据
			async getSwiperList() {
				const { data: res } = await uni.$http.get('/swiper')
				this.swiperListData = res.data
			},
			// 获取商品介绍信息
			async getGoodsIntro() {
				if(this.isReachingBottomRequest || this.isFinish) return
				// 修改请求标志  当前正在请求  此时若再次触发下拉触底事件 不会请求后端数据
				this.isReachingBottomRequest = true
				const { data: res } = await uni.$http.get('/goods', { page: this.page, num: this.num })
				if(res.meta.status !== 200) {
					return uni.showToast({
						title: '失败',
						icon: 'error',
						duration: 1000
					})
				}
				// 将每次新请求到的商品列表数据追加至goodsIntroList数组的末尾
				this.goodsIntroList = [...this.goodsIntroList, ...res.recordset]
				if(res.recordset.length === 0) this.isFinish = true
				// 请求完毕后修改状态标识为false 便于下次请求
				this.isReachingBottomRequest = false
				// console.log(this.goodsIntroList)
			},
			// 商品介绍页被点击时将会跳转至商品详情页
			gotoGoodsDetail(id, mid) {
				uni.navigateTo({
					url: `../../subpages/goodsdetail/goodsdetail?id=${ id }&mid=${ mid }`
				})
			},
			// 前往搜索页面
			gotoSearchPage() {
				uni.navigateTo({
					url: '/subpages/searchpage/searchpage'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
	
	.search-area {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: red;
		height: 120rpx;
		z-index: 100;
	}
	
	.search-area button {
		height: 100%;
		line-height: 120rpx;
		background-color: transparent;
		color: #fff;
	}
	
	.search-icon {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 40rpx;
		background-color: #fff;
		border-radius: 60rpx;
	}
	
	.swiper-area,
	swiper,
	swiper-item {
		width: 100%;
		height: 400rpx;
	}
	
	.swiper-area {
		margin-top: 120rpx;
	}
	
	.swiper-area image {
		width: 100%;
		height: 100%;
	}
	
	.type-show {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.type-show view {
		width: 20%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.type-show view image {
		width: 120rpx;
		height: 120rpx;
	}
	
	.goods-area {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
</style>
